<template>
  <div>
    <div ref="table" style="position: absolute; width: 600px;height:400px;left:20px;top:20px;"></div>
    <div id="simple-controls">
      <h4>控制面板</h4>
      <button id="save-btn" @click="onSave">保存</button>
      <button id="reload-btn" @click="onReload">重载</button>
      <button id="clear-btn" @click="onClear">清除</button>
      <div id="status">状态: 已加载</div>
    </div>
  </div>
</template>

<script>
import { VTableSheet } from '@visactor/vtable-sheet';
// 创建持久化辅助函数
const SheetPersistence = {
  // 保存表格状态
  saveState: (sheetInstance, key = 'vtable-sheet-state') => {
    try {
      const config = sheetInstance.saveToConfig();
      localStorage.setItem(key, JSON.stringify(config));
      return true;
    } catch (error) {
      console.error('保存表格状态失败:', error);
      return false;
    }
  },
  // 加载表格状态
  loadState: (container, key = 'vtable-sheet-state', defaultConfig = null) => {
    try {
      const savedJson = localStorage.getItem(key);
      if (savedJson) {
        const config = JSON.parse(savedJson);
        return new VTableSheet(container, config);
      } else if (defaultConfig) {
        return new VTableSheet(container,JSON.parse(JSON.stringify(defaultConfig)));
      }
    } catch (error) {
      console.error('加载表格状态失败:', error);
      if (defaultConfig) {
        return new VTableSheet(container,JSON.parse(JSON.stringify(defaultConfig)));
      }
    }
    return null;
  },
  // 清除保存的状态
  clearState: (key = 'vtable-sheet-state') => {
    localStorage.removeItem(key);
  }
}
export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {
      tableInstance: null,
      defaultConfig: {
        sheets: [
          {
            sheetKey: 'sheet1',
            sheetTitle: '表格1',
            data: [
              ['姓名', '年龄', '部门'],
              ['张三', 28, '技术部'],
              ['李四', 32, '市场部']
            ],
            active: true
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.createTable();
  },
  methods: {
    onSave(){
      if (SheetPersistence.saveState(this.tableInstance, 'my-sheet')) {
        alert('表格状态已保存');
      } else {
        alert('保存失败');
      }
    },
    onReload(){
      this.tableInstance?.release?.();
      const sheetInstance = SheetPersistence.loadState(this.container, 'my-sheet', this,defaultConfig);
    },
    onClear(){
      SheetPersistence.clearState('my-sheet');
      alert('已清除缓存中保存的表格状态，点击重新加载后恢复默认状态');
    },
    createTable() {
      this.container = this.$refs.table
      this.tableInstance = SheetPersistence.loadState(this.container, 'my-sheet', this.defaultConfig);
    },
    createTable() {
      this.container = this.$refs.table
      this.tableInstance = SheetPersistence.loadState(this.container, 'my-sheet', this.defaultConfig);
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
#simple-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-family: Arial, sans-serif;
  z-index: 1000;
  width: 120px;
  h4 {
    margin: 0 0 6px 0; color: #333; font-size: 12px;
  }
}
#save-btn {
  width: 100%;
  margin: 2px 0;
  padding: 4px;
  border: 1px solid #007bff;
  background: #007bff;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
#reload-btn{
  width: 100%;
  margin: 2px 0;
  padding: 4px;
  border: 1px solid #28a745;
  background: #28a745;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
#clear-btn {
  width: 100%;
  margin: 2px 0;
  padding: 4px;
  border: 1px solid #dc3545;
  background: #dc3545;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
#status {
  margin-top: 6px;
  padding: 3px;
  background: #f8f9fa;
  border-radius: 3px;
  font-size: 10px;
  color: #666;
}
</style>
